<template>
<div>
  <van-button type="primary" text="显示遮罩层" @click="show = true" />
  <van-overlay :show="show" @click="show = false">
    <div class="wrapper" @click.stop>
      <div class="block" style="overflow: hidden;padding: 10px;border-radius: 5px">
        <p v-html="count" style="text-indent: 2rem">{{count}}</p>
        <button style="float: left" @click="trans">换一个</button>
        <button @click="show = false" style="float: right">关闭</button>
      </div>
    </div>
  </van-overlay>
</div>
</template>

<script>
import {joke} from "@/api/http";
export default {
name: "joke",
  data() {
    return {
      show: false,
      count:''
    }
  },
  methods:{
    trans(){
      joke().then(res=>{
        console.log(res)
        this.count = res.data[0].content
      })
    }
  },
  created() {
    joke().then(res=>{
      console.log(res)
      this.count = res.data[0].content
    })
  }
}
</script>

<style scoped lang="less">
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  z-index: 9999999999;
  width: 80%;
  margin: auto;
  //height: 300px;
  background-color: #fff;
}
</style>